import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_framework/utils/screen.dart';

class WidgetDemo extends StatefulWidget {
  const WidgetDemo({super.key});

  @override
  WidgetDemoState createState() => WidgetDemoState();
}

class WidgetDemoState extends State<WidgetDemo> {
  Widget _buildExpanded() {
    return Column(
      children: [
        const Text('Expanded flex 属性'),
        Row(
          children: [
            Expanded(
                flex: 2,
                child: Container(
                  color: Colors.red,
                  height: 20,
                )),
            Expanded(
                child: Container(
              color: Colors.black,
              height: 20,
            ))
          ],
        ),
      ],
    );
  }

  Widget _buildTable() {
    return Table(
      border: TableBorder.all(color: Colors.red, width: 1),
      columnWidths: const {
        0: FlexColumnWidth(1),
        1: FixedColumnWidth(100),

        ///宽度占所在容器的百分比（0-1）
        2: FractionColumnWidth(0.5),
        3: IntrinsicColumnWidth(flex: 0.2),

        ///大于容器10%宽度，但小于等于100px
        4: MaxColumnWidth(FixedColumnWidth(100.0), FractionColumnWidth(0.1)),
        5: MinColumnWidth(FixedColumnWidth(100.0), FractionColumnWidth(0.1)),
      },
      textDirection: TextDirection.ltr,
      children: [
        TableRow(
            decoration: ShapeDecoration(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(0)),
                color: Colors.blue),
            children: [
              TableCell(
                child: Container(
                  height: 40,
                  alignment: Alignment.center,
                  child: const Text(
                    '年龄',
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              TableCell(
                child: Container(
                  height: 40,
                  alignment: Alignment.center,
                  child: const Text(
                    '性别',
                    textAlign: TextAlign.center,
                  ),
                ),
              )
            ]),
        TableRow(children: [
          TableCell(
            child: Text(
              '20',
              textAlign: TextAlign.center,
            ),
          ),
          TableCell(
            child: Text(
              '男',
              textAlign: TextAlign.center,
            ),
          )
        ])
      ],
    );
  }

  Widget _buildFittedBox() {
    return Container(
        width: 200,
        height: 200,
        color: Colors.grey,
        child: FittedBox(
          // fit: BoxFit.scaleDown,
          fit: BoxFit.fill,
          alignment: Alignment.topLeft,
          child: Container(
            color: Colors.red,
            child: Text('缩放布局'),
          ),
        ));
  }

  Widget _buildAbsortPointer() {
    return AbsorbPointer(
      // true 禁止 false 可以点击
      absorbing: false,
      child: CupertinoButton(
          onPressed: () {
            print('123123123');
          },
          child: Container(
            color: Colors.yellow,
            child: Text('123123'),
          )),
    );
  }

  Widget _buildImgFilter() {
    return ClipRRect(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.green,
        alignment: Alignment.center,
        child: Stack(children: [
          Positioned(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
          ),
        ]),
      ),
    );
  }

  Widget _buildDismissble() {
    return Column(
      children: [
        Dismissible(
          key: ValueKey(1),
          direction: DismissDirection.up,
          child: Container(
            height: 30,
            width: Screen.width,
            color: Colors.yellow,
            child: Text('123'),
          ),
          background: Container(
            color: Colors.red,
            width: 30,
            child: Text('删除'),
          ),
        )
      ],
    );
  }

  Widget _buildStack() {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Positioned(
          right: -10,
          top: -10,
          child: Container(
            width: 20,
            height: 20,
            color: Colors.black,
          ),
        )
      ],
    );
  }

  Widget _buildColorFiltered() {
    return ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
        child: Text('灰度测试'),
      ),
    );
  }

  Widget _buildGaps() {
    return SizedBox(
      child: Container(
        height: 20,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('widget组件'),
      ),
      body: SingleChildScrollView(
          child: Column(
        children: [
          _buildExpanded(),
          _buildGaps(),
          // table 表单
          _buildTable(),
          _buildGaps(),
          // 缩放布局
          _buildFittedBox(),
          _buildGaps(),
          // 屏蔽点击事件
          _buildAbsortPointer(),
          _buildGaps(),
          // imageFilter
          _buildImgFilter(),
          _buildGaps(),
          // dissmissble
          _buildDismissble(),
          _buildGaps(),
          // stack 超出裁剪
          _buildStack(),
          _buildGaps(),
          // FractionallySizedBox 百分比宽高
          _buildGaps(),
          // color filtered
          _buildColorFiltered(),
          _buildGaps(),
          // togglebuttons 按钮组组件
          // tweenAnimationBuilder 简单的动画组件
          // 带动画的 listView ： listWheelScrollView
          // 着色器 shaderMask  可使用渐变色 或者 图片着色
          // Builder 包一层Builder 获取最新的ctx
          // clipPath 画奇怪的形状
          //CircularProgressIndicator() || LinearProgressIndicator  valueColor 可以传入补间颜色 colorTween 设置动画颜色变化
          // ignorePointer 禁用操作的组件
          // 菊花图组件 CupertinoActivityIndicator()
          // AnimatedWidget Footransition
          // checkboxListTile  SwitchListTile
          // url_luncher 打开一个链接
          // interActiveViewer 可放大缩小的widget 得自定义写
          // imageFiltered 模糊图片。性能比 BackdropFilter 好
          // physicalModel  给组件添加阴影，
          // package.animations 插件，提供很多带动画的widget
          // flutter_slidable 一个左滑右滑加入操作按钮的组件
          // RotatedBox 可旋转组件，布局占位的空间也会旋转
          // ExpandsionPanel  点击展开更多内容的组件 带标题的
          // Scrollbar 可设置显示滚动条bar
          // Connectivity 检查当前网络连接状态 监听listen时间可捕捉网络状态更改
          //AnimateTextKit 给文案widget 添加动画效果
          // MouseRegion 给区域添加鼠标 可添加回调监听
          // Sensors_plus 传感器监听，监听手机滚动移动
          // collection 一个工具类集合库
          // Flow 可控制一组icon的动画
          // TabPageSelect 页面指示器
          // BaseLine 行对齐文案
          // Badges  小红点
          // ScaffoldMessenger.of(context) 解决snackbar 没有跟随页面跳到下一页
          // shared_preferences 持久化存储
          // FocusableActionDetector  聚焦状态按钮
          // NavigationRail 侧边导航按钮
        ],
      )),
    );
  }
}
